<style lang="less">
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 700px;

    .ivu-modal {
        top: 0;
    }
}
</style>
<template>
    <Modal
        v-model="drawer.show" transfer
        :title="lang.new"
        :width="width"
        :z-index="zIndex"
        :draggable="true"
        :mask-closable="false"
        @on-ok="ok">
        <span slot="header" :style="titleStyle">{{lang.new}}</span>
        <div v-if="drawer.show" style="min-height: 320px; height:320px;overflow-y: auto;overflow-x:hidden;margin: 10px;">
            <Form ref="_frm" :model="data" :rules="ruleValidate" :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="type" :label="lang.type">
                            <Select v-model="data.type" transfer :clearable="false">
                                <Option v-for="item in typeList" :key="item.label" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="className" :label="lang.className">
                            <Select v-model="data.className" transfer :clearable="false">
                                <Option v-for="item in classnameList" :key="item.title" :value="item.title">
                                    {{ item.title }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                </Row>
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="name" :label="lang.instanceName">
                            <Input v-model="data.name" clearable :placeholder="lang.instanceNamePlaceholder"
                                   maxlength="64"/>
                        </FormItem>
                    </Col>
                    <Col span="12">

                    </Col>
                </Row>
              <Row :gutter="32">
                <Col span="24">
                  <FormItem prop="comments" :label="lang.comments">
                    <Input v-model="data.comments" clearable :placeholder="lang.commentsPlaceholder"
                           type="textarea"/>
                  </FormItem>
                </Col>
              </Row>
            </Form>
        </div>
    </Modal>
</template>

<script>
    export default {
        name: 'cfgTemplateInstanceNewAddModal',
        data () {
            return {
              collectionObject:null,
              data:{published:true},
              modelType:'statTemplate',
              features: [],
              general: {
                  status: { type: 'Boolean', defaultValue: false },
                  name: { type: 'string', defaultValue: '' },
              },
              propInfo: {},
              values: {},
              modelClassList: [],
              freshForm: false,
              form: {
                  title: 'test',
                  labelWidth: 160,
                  interval: 24,
                  itemWidth: null,
                  itemAlign: true,
                  col: 2,
                  disabled: false,
                  submit: 'submit',
                  confirmPrompt: 'confirmPrompt',
                  cancel: 'cancel'
              },
              fields: [],
              localOptions: [],
              formData: {},
              formStyle: {},
              formHeight: 200,
            }
        },
        props: {
          width: {
            default: () => {
              return 1024;
            }
          },
          zIndex: {
            default: () => {
              return 100;
            }
          },
          titleStyle: {
            default: () => {
              return {}
            }
          },
            loading: {
                default: () => {
                    return false;
                }
            },
            show: {
                default: () => {
                    return false;
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false,
                    };
                }
            },
            modelList: {
                default: () => {
                    return []
                }
            }
        },
        computed: {
            labelWidth () {
                return 100;
            },
            labelPosition () {
                return 'right';
            },
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        new: 'new',
                        detail: 'detail',
                        action: 'action',
                        submit: 'submit',
                        type: 'type',
                        typePlaceholder: 'Please select type',
                        className: 'className',
                        classNamePlaceholder: 'Please enter class name',
                        version: 'version',
                        versionPlaceholder: 'Please enter version',
                        published: 'published',
                        instanceName: 'instance name',
                        instanceNamePlaceholder: 'Please instance name',
                        comments: 'comments',
                        commentsPlaceholder: 'Please enter comments',
                        modelProperties: 'Model Attribute Configuration',
                        typeRuleMsg: 'Please select property type',
                        classNameRuleMsg: 'Please enter class name',
                        instanceNameRuleMsg: 'Please instance name'
                    },
                    'zh-CN': {
                        edit: '编辑',
                        new: '添加',
                        detail: '查看',
                        action: '操作',
                        submit: '提交',
                        type: '所属类型',
                        typePlaceholder: '请选择所属类型',
                        className: '模型类名',
                        classNamePlaceholder: '请输入模型类名',
                        version: '版本号',
                        versionPlaceholder: '请输入版本号',
                        published: '是否发布',
                        instanceName: '实例名',
                        instanceNamePlaceholder: '请输入实例名',
                        comments: '说明',
                        commentsPlaceholder: '请输入描述信息',
                        modelProperties: '模型属性配置',
                        typeRuleMsg: '请选择所属类型',
                        classNameRuleMsg: '请输入模型类名',
                        instanceNameRuleMsg: '请输入实例名'
                    },
                }[this.G_Locale]
            },
            typeList() {
              return this.$modelObject.getModelType(this.modelType);
            },
          classnameList(){
              let index=this.collectionObject.infoTree.findIndex(item=>item.title===this.data.type);
              if(index!==-1){
                return this.collectionObject.infoTree[index].children;
              }else{
                return [];
              }
          },
          ruleValidate () {
                return {
                    type: [
                        { required: true, message: this.lang.typeRuleMsg, trigger: 'blur' }
                    ],
                    className: [
                        { required: true, message: this.lang.classNameRuleMsg, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: this.lang.instanceNameRuleMsg, trigger: 'blur' }
                    ],
                }
            }
        },
        mounted () {
          this.collectionObject=this.$modelObject.create(this.modelType+'ModelCollection');
          this.collectionObject.listAllInfo();
        },
        methods: {
            /**
             * 提交添加或修改数据
             */
            ok () {
                this.$refs._frm.validate(valid => {
                    if (valid) {
                        this.$emit('submit', this.data);
                    }
                });
            },
        }
    }
</script>
